<template>
    <div class="page">
        <div class="page-top">
            <!-- 面包屑 -->
            <Hreadcrumb :hreadcrumbAry="hreadcrumbAry" />
        </div>
        <div class="page-content">
            <a-form-model layout="inline" style="margin-bottom: 20px" :form="form">
                <a-form-model-item label="飞迩客户编码">
                    <a-input v-model="form.scsCustomerCode"></a-input>
                </a-form-model-item>
                <a-form-model-item label="销帮帮客户ID">
                    <a-input v-model="form.xbbCustomerId"></a-input>
                </a-form-model-item>
                <a-form-model-item label="飞迩客户名称">
                    <a-input v-model="form.scsCustomerName"></a-input>
                </a-form-model-item>
                <a-form-model-item label="销帮帮客户名称">
                    <a-input v-model="form.xbbCustomerName"></a-input>
                </a-form-model-item>
                <a-form-model-item label="是否有效">
                    <a-select default-value="全部" style="width:100px" v-model="form.useFlag">
                        <a-select-option value=1>有效</a-select-option>
                        <a-select-option value=0>无效</a-select-option>
                        <a-select-option value=-1>全部</a-select-option>
                    </a-select>
                </a-form-model-item>
                <a-form-model-item>
                    <a-button type="primary" html-type="submit" @click="onSubmit"> 提交 </a-button>
                    <a-button style="margin-left: 15px" @click="bindReset">
                        重置
                    </a-button>
                    <a-button @click="openModal" style="margin-left: 15px"> 新增 </a-button>
                    <a-button @click="delmultiple" style="margin-left: 15px"> 置为无效 </a-button>
                    <a-button @click="usefulmultiple" style="margin-left: 15px"> 置为有效 </a-button>
                    <a-button @click="exportXBB" style="margin-left: 15px"> 导出 </a-button>
                    <a-button @click="updateXBBCustomer" style="margin-left: 15px"> 同步 </a-button>
                </a-form-model-item>
            </a-form-model>
            <a-table :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }" :columns="columns"
                :data-source="data" :loading="loading" :pagination="pagination" @change="handleTableChange">
                <span slot="options" slot-scope="text,record">
                    <a-button type="primary" @click="del(record)" v-if='record.useFlag == 1'>置为无效</a-button>
                    <a-button type="primary" @click="useful(record)" v-else>置为有效</a-button>
                    <a-button type="primary" @click="edit(record)" style="margin-left:15px">编辑</a-button>
                </span>
                <!-- <span slot="xbbCustomerType" slot-scope="text,record">
                    {{ text == '0' ? '终端渠道-新店' : text == '1' ? '终端渠道-老店' : text == '2' ? '销商渠道' : ''}}
                </span> -->
            </a-table>
            <a-modal v-model="visible" :title="tit" @ok="handleOk" @cancel="closeModal">
                <a-form-model layout="inline" :form='detail'>
                    <a-form-model-item label="飞迩客户编码">
                        <a-input style="width:300px" v-model="detail.scsCustomerCode"></a-input>
                    </a-form-model-item>
                    <a-form-model-item label="飞迩客户名称" in>
                        <a-input style="width:300px" v-model="detail.scsCustomerName"></a-input>
                    </a-form-model-item>
                    <a-form-model-item label="销帮帮客户编码">
                        <a-input style="width:300px" v-model="detail.xbbCustomerCode"></a-input>
                    </a-form-model-item>
                    <a-form-model-item label="销帮帮客户名称" in>
                        <a-input style="width:300px" v-model="detail.xbbCustomerName"></a-input>
                    </a-form-model-item>
                    <a-form-model-item label="销帮帮客户类型">
                        <a-select style="width:200px" v-model="detail.xbbCustomerType">
                            <a-select-option value='0'>终端渠道-新店</a-select-option>
                            <a-select-option value='1'>终端渠道-老店</a-select-option>
                            <a-select-option value='2'>经销商渠道</a-select-option>
                        </a-select>
                    </a-form-model-item>
                </a-form-model>
            </a-modal>
        </div>
    </div>
</template>
<script>
import Hreadcrumb from "@/components/Hreadcrumb";
import { getXBBCustomersCodeList, addOrUpdateXBBCustomersCode, deleteXBBCustomersCode, usefulXBBCustomersCode, baseUrl,updateXBBCustomer } from "@/request/api";
import axios from 'axios';
export default {
    data() {
        return {
            loading: false,
            hreadcrumbAry: [
                { name: "首页", path: "/", query: {} },
                { name: "销帮帮飞迩客户对照表", path: "/XBBCustomersCompare", query: {} },
            ],
            form: {
                xbbCustomerId: "",
                scsCustomerName: "",
                scsCustomerCode: "",
                xbbCustomerName:"",
                useFlag: '1'
            },
            detail: {
                xbbCustomerCode: "",
                scsCustomerName: "",
                scsCustomerCode: "",
                xbbCustomerName:"",
                xbbCustomerType:"",
                id: "",
                operateBy: JSON.parse(localStorage.getItem("userInfo")).userName,
            },
            pagination: { current: 1, size: 10 },
            data: [],
            selectedRowKeys: [],
            columns: [
                {
                    title: "飞迩客户编码",
                    dataIndex: "scsCustomerCode",
                    key: "scsCustomerCode",
                    width: ''
                },
                {
                    title: "销帮帮客户Id",
                    dataIndex: "xbbCustomerId",
                    key: "xbbCustomerId",
                    width: ''
                },
                {
                    title: "销帮帮客户名称",
                    dataIndex: "xbbCustomerName",
                    key: "xbbCustomerName",
                    width: ''
                },
                {
                    title: "销帮帮客户编码",
                    dataIndex: "xbbCustomerCode",
                    key: "xbbCustomerCode",
                    width: ''
                },
                 {
                    title: "销帮帮客户类型",
                    dataIndex: "xbbCustomerType",
                    key: "xbbCustomerType",
                    // slots: { title: "xbbCustomerType" },
                    // scopedSlots: { customRender: "xbbCustomerType" },
                    width: ''
                },
                {
                    title: "飞迩客户名称",
                    dataIndex: "scsCustomerName",
                    key: "scsCustomerName",
                    width: ''
                },
                {
                    title: "操作时间",
                    dataIndex: "createTime",
                    key: "createTime",
                    width: 120
                },
                {
                    title: "创建人",
                    dataIndex: "createBy",
                    key: "createBy",
                    width: 100
                },
                {
                    title: "运行时间",
                    dataIndex: "updateTime",
                    key: "updateTime",
                    width: 120
                },
                {
                    title: "更新人",
                    dataIndex: "updateBy",
                    key: "updateBy",
                    width: 100
                },
                {
                    title: "编辑",
                    dataIndex: "options",
                    key: "options",
                    slots: { title: "操作" },
                    scopedSlots: { customRender: "options" },
                    width: "220px",
                },
            ],
            visible: false,
            tit: '编辑'
        };
    },
    components: {
        Hreadcrumb,
    },
    created() {
        this.getXBBCustomersCodeList(1, 10)
    },
    methods: {
        async getXBBCustomersCodeList(p, ps) {
            this.loading = true
            let { xbbCustomerId, scsCustomerName, scsCustomerCode, useFlag, xbbCustomerName } = this.form
            let params = "p=" + (p - 1) + "&ps=" + ps + "&xbbCustomerId=" + xbbCustomerId + "&scsCustomerName=" + scsCustomerName + "&xbbCustomerName=" + xbbCustomerName + "&scsCustomerCode=" + scsCustomerCode + "&useFlag=" + useFlag
            let { data } = await getXBBCustomersCodeList(params);
            console.log(data)
            if (data.success) {
                this.loading = false;
                let pagination = { ...this.pagination };
                pagination.total = data.content.total;
                this.pagination = pagination
                this.data = data.content.records
                this.selectedRowKeys = []
            } else {
                this.loading = false;
            }
        },
        handleTableChange(pagination) {
            console.log(pagination);
            const pager = { ...this.pagination };
            pager.current = pagination.current;
            this.pagination = pager;
            this.getXBBCustomersCodeList(pager.current, pager.size);
        },
        onSubmit(e) {
            e.preventDefault();
            console.log(this.form);
            this.getXBBCustomersCodeList(1, 10);
        },
        bindReset() {
            this.form = {
                xbbCustomerId: "",
                scsCustomerName: "",
                scsCustomerCode: "",
                xbbCustomerName:"",
                useFlag: '1'
            };
            this.getXBBCustomersCodeList(1, 10);
        },
        onSelectChange(selectedRowKeys) {
            console.log('selectedRowKeys changed: ', selectedRowKeys);
            this.selectedRowKeys = selectedRowKeys;
        },
        openModal() {
            this.visible = true
        },
        handleOk() {
            this.addOrUpdateXBBCustomersCode()
            this.closeModal()
        },
        edit(record) {
            this.detail = {
                id: record.id,
                xbbCustomerCode: record.xbbCustomerCode,
                scsCustomerName: record.scsCustomerName,
                scsCustomerCode: record.scsCustomerCode,
                xbbCustomerName: record.xbbCustomerName,
                xbbCustomerType: record.xbbCustomerType == '终端渠道-新店' ? '0' : record.xbbCustomerType == '终端渠道-老店' ? '1' : record.xbbCustomerType == '经销商渠道' ? '2' : '',
                operateBy: JSON.parse(localStorage.getItem("userInfo")).userName,
            }
            this.openModal()
        },
        closeModal() {
            this.detail = {
                xbbCustomerCode: "",
                scsCustomerName: "",
                scsCustomerCode: "",
                xbbCustomerName: "",
                id: "",
                xbbCustomerType: "",
                operateBy: JSON.parse(localStorage.getItem("userInfo")).userName,
            }
            this.visible = false
        },
        async addOrUpdateXBBCustomersCode() {
            console.log(this.detail)
            this.detail.xbbCustomerType == 0 ? this.detail.xbbCustomerType = '终端渠道-新店' : this.detail.xbbCustomerType == 1 ? this.detail.xbbCustomerType = '终端渠道-老店' :this.detail.xbbCustomerType == 2 ? this.detail.xbbCustomerType = '经销商渠道' : this.detail.xbbCustomerType = ''
            let { data } = await addOrUpdateXBBCustomersCode(this.detail)
            console.log(data)
            if (data.success) {
                this.getXBBCustomersCodeList(this.pagination.current, 10);
            } else {
                this.$message.error(data.content);
            }
        },
        del(record) {
            let ids = []
            ids.push(record.id)
            this.confirmDel(ids)
        },
        useful(record) {
            let ids = []
            ids.push(record.id)
            this.confirmUseful(ids)
        },
        delmultiple() {
            let ids = []
            this.data && this.data.map((item, i) => {
                this.selectedRowKeys && this.selectedRowKeys.map(items => {
                    if (i == items) {
                        ids.push(item.id)
                    }
                })
            })
            this.confirmDel(ids)
        },
        usefulmultiple() {
            let ids = []
            this.data && this.data.map((item, i) => {
                this.selectedRowKeys && this.selectedRowKeys.map(items => {
                    if (i == items) {
                        ids.push(item.id)
                    }
                })
            })
            this.confirmUseful(ids)
        },
        confirmDel(ids) {
            let _this = this
            this.$confirm({
                title: '确定置为无效',
                content: '',
                okText: '确定',
                okType: 'danger',
                cancelText: '取消',
                onOk() {
                    _this.deleteXBBCustomersCode(ids)
                },
                onCancel() {
                    console.log('Cancel');
                },
            });
        },
        confirmUseful(ids) {
            let _this = this
            this.$confirm({
                title: '确定置为有效',
                content: '',
                okText: '确定',
                okType: 'danger',
                cancelText: '取消',
                onOk() {
                    _this.usefulXBBCustomersCode(ids)
                },
                onCancel() {
                    console.log('Cancel');
                },
            });
        },
        handleJdDept(e) {
            console.log(e)
            this.detail.jdDept = e
        },
        async deleteXBBCustomersCode(arr) {
            let _this = this
            let ids = ''
            arr && arr.map(item => {
                ids += item + ','
            })
            let params = 'ids=' + ids + '&operateBy=' + JSON.parse(localStorage.getItem("userInfo")).userName
            console.log(params)
            let { data } = await deleteXBBCustomersCode(params)
            console.log(data)
            if (data.success) {
                _this.getXBBCustomersCodeList(_this.pagination.current, 10);
            } else {
                _this.$message.error(data.content)
            }
        },
        async usefulXBBCustomersCode(arr) {
            let _this = this
            let ids = ''
            arr && arr.map(item => {
                ids += item + ','
            })
            let params = 'ids=' + ids + '&operateBy=' + JSON.parse(localStorage.getItem("userInfo")).userName
            console.log(params)
            let { data } = await usefulXBBCustomersCode(params)
            console.log(data)
            if (data.success) {
                _this.getXBBCustomersCodeList(_this.pagination.current, 10);
            } else {
                _this.$message.error(data.content)
            }
        },
        exportXBB() {
            axios({
                method: 'get',
                url: `/crm/exportXbbScsCustomersCodeExcel`,
                data: '',
                responseType: 'blob'
            }).then(res => {
                console.log(res)
                let blob = new Blob([res.data])
                const link = document.createElement('a')
                link.style.display = 'none'
                link.href = URL.createObjectURL(blob)
                link.setAttribute('download', '销帮帮飞迩客户对照表.xls')
                document.body.appendChild(link)
                link.click()
                document.body.removeChild(link)
            })
        },
        async updateXBBCustomer(){
            let _this = this
            let res = await updateXBBCustomer()
            console.log(res)
            if(res.data.success){
                _this.$message.success(res.data.message)
            }else{
                _this.$message.error(res.data.message)
            }
        }
    },
};
</script>
<style>
.page-content {
    background-color: #fff;
    padding: 25px;
}
</style>